<template>
  <div class="userinfo">
    <h3>修改资料页面</h3>
    <van-form @submit="onSubmit">
      <van-row>
        <van-uploader :after-read="Onread" :max-count="1">
          <van-image
            width="60px"
            height="45px"
            round
            :src="userInfo.avatar ? userInfo.avatar : img | diaImg"
          />
        </van-uploader>
      </van-row>
      <van-row tag="div">
        <van-cell-group>
          <van-field
            ref="files"
            @blur="hidden(1)"
            v-model="userInfo.userName"
            name="userName"
            label="用户名"
            placeholder="请输入用户名"
            v-show="isEdit[0].flag"
          />
        </van-cell-group>
        <van-col span="18" @click="shows(1)">用户名</van-col>
        <van-col span="6">{{ userInfo.userName }}</van-col>
      </van-row>
      <van-row tag="div">
        <van-cell-group>
          <van-field
            @blur="hidden(2)"
            name="nickName"
            v-model="userInfo.nickName"
            label="昵称"
            placeholder="请输入昵称"
            v-show="isEdit[1].flag"
          />
        </van-cell-group>
        <van-col span="18" @click="shows(2)">昵称</van-col>
        <van-col span="6">{{ userInfo.nickName }}</van-col>
      </van-row>
      <van-row tag="div">
        <van-cell-group>
          <van-field
            name="age"
            @blur="hidden(3)"
            v-model="userInfo.age"
            label="年龄"
            placeholder="请输入年龄"
            v-show="isEdit[2].flag"
          />
        </van-cell-group>
        <van-col span="18" @click="shows(3)">年龄</van-col>
        <van-col span="6">{{ userInfo.age }}</van-col>
      </van-row>
      <van-row tag="div">
        <van-cell-group>
          <van-field
            name="gender"
            @blur="hidden(4)"
            v-model="userInfo.gender"
            label="性别"
            placeholder="请输入性别"
            v-show="isEdit[3].flag"
          />
        </van-cell-group>
        <van-col span="18" @click="shows(4)">性别</van-col>
        <van-col span="6">{{ userInfo.gender}}</van-col>
      </van-row>
      <van-row tag="div">
        <van-cell-group>
          <van-field
            name="area"
            @blur="hidden(5)"
            v-model="userInfo.area"
            label="地区"
            placeholder="请输入地区"
            v-show="isEdit[4].flag"
          />
        </van-cell-group>
        <van-col span="18" @click="shows(5)">地区</van-col>
        <van-col span="6">{{ userInfo.area }}</van-col>
      </van-row>
      <van-row tag="div">
        <van-col span="18">注册时间</van-col>
        <van-col span="6">{{ userInfo.createdAt | forTime }}</van-col>
      </van-row>
      <van-button round block type="info" native-type="submit">提交</van-button>
    </van-form>
  </div>
</template>

<script>
import moment from "moment";
// import {userModifyAPI,UPloadAPI} from "@/services/userInfo"
import {UPloadAPI} from "@/services/userInfo"
export default {
  data() {
    return {
      // 格式化时间的时候使用
      userInfo:JSON.parse(localStorage.getItem("userinfo")),
      time: "",
      img: "https://img2.baidu.com/it/u=4274144176,1031990689&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=674",
      isEdit: [
        {
          id: 1,

          flag: false,
        },
        {
          id: 2,

          flag: false,
        },
        {
          id: 3,

          flag: false,
        },
        {
          id: 4,

          flag: false,
        },
        {
          id: 5,

          flag: false,
        },
      ],
    };
  },

created() {
  },
  // 在挂载完毕之后执相当于在dom元素加载完后执行或者不用这种办法用全局定义的时间过滤器
  mounted() {
       this.time = moment(this.userInfo.createdAt).format("YYYY-MM-DD");
  },
  computed: {

  },
  methods: {  
    shows(id) {
      console.log(JSON.stringify(this.isEdit));
      this.isEdit.find((item) => item.id == id).flag = true;
    },
    hidden(id) {
      // console.log(id);
      this.isEdit.find((item) => item.id == id).flag = false;
    },
    onSubmit(val) {
       console.log(val)
       let avatar = this.userInfo.avatar?this.userInfo.avatar:this.img;
       let alterInfo = {...val,avatar};
       this.$store.dispatch("userinfo/modify",alterInfo);
       console.log(alterInfo);

    },
    async Onread(file) {
       let fordata = new FormData();
       fordata.append("file",file.file);
      // console.log(file.file);
       const result = await UPloadAPI(fordata);
       console.log(result);
      if(result.code==1) {
           this.userInfo.avatar = result.data;
           this.img = result.data;
      }
    },
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

div {
  padding: 0 10px;
  margin: 10px 0;
  font-weight: 400;
}
</style>
